<template>
    <div class="xinpin">
        <shop-title></shop-title>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in list" :key="index">
                <img :src="item" alt="" />
            </van-swipe-item>
        </van-swipe>
        <div class="title">所有分类</div>
        <div class="card">
            <ul>
                <li v-for="(item, index) in list1" :key="index">
                    <router-link :to="item.path"></router-link>
                    <img v-lazy="item.imgurl" alt="" />
                    <div class="name">{{ item.name }}</div>
                </li>
            </ul>
        </div>
        <div class="line">品质生活</div>
        <div class="pic">
            <img :src="pzsh" alt="">
        </div>
        <div class="line">品牌特卖</div>
        <div class="pic">
            <img :src="pptm" alt="">
        </div>
        <div class="none"></div>
        <shouye-under />
    </div>
</template>

<script>
import shopTitle from "../../../components/shoptitle.vue";
import shouyeUnder from "../../../components/shouyeUnder.vue"
import Vue from "vue";
import { Lazyload } from "vant";


Vue.use(Lazyload);
export default {
   
    data() {
        return {
            list: [
                require("../../../assets/shopcartimg/1.jpg"),
                require("../../../assets/shopcartimg/2.jpg"),
            ],
            list1: [
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/卧室.jpg"),
                    name: "卧室",
                },
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/客厅.jpg"),
                    name: "客厅",
                },
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/浴室.jpg"),
                    name: "浴室",
                },
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/厨房.jpg"),
                    name: "厨房",
                },
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/餐厅.jpg"),
                    name: "餐厅",
                },
                {
                    path: "",
                    imgurl: require("../../../assets/NewarrivalImg/儿童.jpg"),
                    name: "儿童",
                },
            ],
            value: "",
            pzsh:require('../../../assets/shopcartimg/pzsh.png'),
            pptm:require('../../../assets/shopcartimg/pptm.png')
        };
    },
    methods:{
       
    },
    components: {
        shopTitle,
        shouyeUnder
    },
};
</script>

<style scoped lang='less'>
.xinpin{
    font-family:tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
.van-swipe {
    img {
        width: 100%;
        height: 330px;
        float: left;
    }
}
.title {
    font-size: 26px;
    text-align: center;
    width: 100%;
    color: rgba(000, 000, 000, 0.8);
    margin: 20px 0;
}
.card {
    width: 708px;
    height: 340px;
    box-shadow: 5px 5px 5px 1px #eeeeee, -5px -5px 5px 1px #eeeeee;
    margin: auto;
    text-align: center;
    ul {
        overflow: hidden;
        li {
            width: 236px;
            height: 170px;
            float: left;
            margin: auto;
            img {
                border-radius: 50%;
                width: 100px;
                height: 100px;
                display: block;
                margin: 0 auto;
                margin-top: 10px;
            }
            .name {
                width: 100%;
                margin-top: 15px;
                font-size: 24px;
                color: rgba(000, 000, 000, 0.7);
            }
        }
    }
}
.none{
    height: 80px;
}
.line{
    width: 710px;
    margin:20px auto;
    font-size: 26px;
    color: rgba(000, 000, 000, 0.7);
}
.pic{
    width: 710px;
    margin:20px auto;
    img{
        width: 100%;
        border-radius: 20px;
    }
}
</style>